<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <script>

// --------------------------------------------------------------------------------------------------------
// Creates custom GanttUnits 'wh' as working hours, 9:00, 13:00, 14:00, 18:00
// Replace the 9,13,14,18 numbers in the code below to have different working hours

AddGanttUnits("wh",24*3600000/4,null); // Four units per day, but with different length

Grids.OnRoundDate = function(G,d,t){
if(t=="wh"){
   var dw = d%(3600000*24);
   if(dw>=18*3600000) return d-dw+18*3600000;
   if(dw>=14*3600000) return d-dw+14*3600000;
   if(dw>=13*3600000) return d-dw+13*3600000;
   if(dw>=9*3600000) return d-dw+9*3600000;
   return d-dw+(18-24)*3600000;
   }
}

Grids.OnIncDate = function(G,d,t,c){
if(t=="wh"){
   if(c<0) { c = -c; d -= Math.floor((c/4)+1)*24*3600000; c = 4-(c%4); }
   else if(c>=4) { d += Math.floor(c/4)*24*3600000; c = c%4;  }
   if(!c) return d;
   var dm = d%3600000; // Preserves time in minutes. Set it to 0 if the work hours are not whole hours.
   for(var i=0;i<c;i++) {
      var dw = d%(3600000*24);
      if(dw<9*3600000) d += 9*3600000+dm-dw;
      else if(dw<13*3600000) d += 13*3600000+dm-dw;
      else if(dw<14*3600000) d += 14*3600000+dm-dw;
      else if(dw<18*3600000) d += 18*3600000+dm-dw;
      else  d += (24+9)*3600000+dm-dw;
      }
   return d;
   }
}
// --------------------------------------------------------------------------------------------------------

   </script>
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>3. Paging in Gantt chart</h1>
   <h2>Paging options for Gantt chart</h2>

   <div class="Border" id="Border">
      <div class="Xml">Source: <a href='03-Paging.js'>03-Paging.js</a> &nbsp; <a href='03-Data.js'>03-Data.js</a> &nbsp; Gantt is paged by pagers and next by horizontal scroll.</div>
      <div style="font-size:11px;">
         Click to pager page to scroll to the page without zoom change. 
         Click to active pager page (in <span style="background:#8FF;">blue</span>) or 
            to pager with <span style="background:#F8F;">pink</span> or <span style="background:#CFC;">green</span> cursor to zoom to the exact page width (except in Pagers Hrs and Mins).</div>
      <div style="font-size:11px;">
         In pagers the <span style="background:#8FF;">blue</span> cursor is active page. 
         <span style="background:#F8F;">Pink</span> is window position in the chart by scroll, if the zoom width is wider than the whole pager range. 
         <span style="background:#CFC;">Green</span> is pager when the window is wider than the whole pager range.
      </div>
      <div style="font-size:11px;margin-bottom:6px;">
         In pagers the <span style="color:green;">green</span> page contains some data, the <span style="color:#888;">gray</span> page does not contain any data, 
         the standard "black" page does not highlight if it contains data or not. <span style="background:#DDD;">Gray</span> background page contains only excluded dates.
      </div>
      <div class="Main" style='width:100%; height:560px;'>
         <bdo Debug='check' Layout_Url='03-Paging.js' Data_Url="03-Data.js"></bdo>
      </div>
      <br /><br />
      <div class="Xml">Source: <a href='03-Paging2.js'>03-Paging2.js</a> &nbsp; <a href='03-Data.js'>03-Data.js</a> &nbsp; Gantt is paged by pagers only, fits to width without horizontal scrollbar.</div>
      <div class="Main" style='width:100%; height:560px;'>
         <bdo Debug='check' Layout_Url='03-Paging2.js' Data_Url="03-Data.js"></bdo>
      </div>
   </div>

   <ul>
     <li> <h4>Horizontal paging by side pagers</h4><br />
      Horizontal paging in Gantt chart is always client side, fully managed by TreeGrid.<br />
      The Gantt side pagers can be displayed also with grid pager (type Pages) for root rows and also with custom side pagers.<br />
      See documentation for <b><a href="../../Doc/Pager.htm#Gantt">Side pager type Gantt</a></b> and documentation for <a href="../../Doc/Pager.htm">Pager</a>.<br />
      <ul>
         <li>
            Define one or more <h4>side Gantt pagers</h4> by <h3>&lt;Pager Type='Gantt'></h3> in root tag <b>&lt;Pagers> ... &lt;/Pagers></b>. Pager side can be chosen by its attribute <b>Left</b>.<br />
            Specify &lt;Pager> attributes <h3>PageSize</h3> as <a href="../../Doc/GanttZoom.htm#CGanttUnits">GanttUnits</a> for every page size and <h3>ChartSize</h3> as <a href="../../Doc/GanttZoom.htm#CGanttUnits">GanttUnits</a> for the whole pager size.<br />
            By &lt;Pager> attributes <b>ChartLeft</b> and <b>ChartRight</b> you can optionally add next pages on beginning and at the end of the pager to extend ChartSize range.<br />
            By &lt;Pager> attributes <h3>Click</h3> and <h3>DblClick</h3> specify the action done on click or double click to pager page. How the chart will be scrolled or zoomed.<br /> 
            Optionally define &lt;Pager> attributes <b>FirstZoom</b> and <b>LastZoom</b> to show the pager only on specified zoom levels and hide it in all others.<br />
            See documentation for <a href="../../Doc/Pager.htm#Gantt">Side pager type Gantt</a> for more options.<br />
         </li>
         <li>
            Optionally define one or more <h4>zoom levels</h4> by <h3>&lt;Z></h3> tags in root tag <b>&lt;Zoom> ... &lt;/Zoom></b>.<br />
            For every zoom level define <b>Name</b>, <b>GanttUnits</b>, <b>GanttWidth</b>, <b>GanttHeader1</b>(-5) and optionally <b>GanttSize</b> or <b>GanttChartRound</b>, and <b>GanttBackground</b>.<br />
            Initial zoom and position in Gantt define by &lt;C> attributes <b>GanttZoom</b> and <b>GanttZoomDate</b>.<br />
            To not show horizontal scrollbars and let the Gantt to fit its width <i>(like in the second grid)</i> set &lt;C> attribute <b>GanttSizeFit='1'</b> and optionally <b>GanttSmoothZoom='0'</b>.<br />
            See documentation for <a href="../../Doc/GanttZoom.htm#Zoom">Zoom options</a>, <a href="../../Doc/GanttZoom.htm#ZoomList">Zoom selection</a> and <a href="../../Doc/GanttZoom.htm#Size">Chart size limits</a><br />
         </li>
         <li> 
            It is possible to define <h4>custom Gantt units</h4> to be used in PageSize, ChartSize, GanttUnits, GanttHeader, GanttBackground and so on. The custom units cannot be used in GanttExclude.<br />
            The custom units can have even variable size,<i> e.g. this example defines custom units '<b>wh</b>' as work hours 9:00 - 13:00, 13:00 - 14:00, 14:00 - 18:00, 18:00 - 9:00, see it in top grid in zoom level "All in workhours".</i><br />
            The custom units are created by global API function <b>AddGanttUnits</b> that should be called before any Gantt chart is created.<br />
            If the custom units have variable length or don't start on 1/1/1970 00:00:00, they must be calculated in API events <b>OnRoundDate</b> and <b>OnIncDate</b>.<br />
            See documentation for <a href="../../Doc/GanttZoom.htm#AddGanttUnits">Custom Gantt units</a>.<br />
         </li>
      </ul>
     </li>
     <li> <h4>Horizontal paging by scroll</h4><br />
     Renders only visible (due horizontal scroll) part of Gantt chart. 
     <ul>
      <li>
         To switch on the paging by scroll set &lt;C> attribute <h3>GanttPaging</h3><b>='1'</b> of &lt;C> Gantt column.
      </li>
      <li>
         By &lt;C> attribute <b>GanttPagingFixed</b> you can control paging of head rows, foot rows and Gantt background. The part can be displayed for the whole chart or rendered only for actual page.<br />
         By default is background and foot rows. And Gantt headers can be paged individually by their <b>GanttHeaderPaging1</b>-5 attributes.<br />
      </li>
      <li>
         For Gantt paging is set the default maximal width to 1 193 049 pixels. If the width of the whole displayed Gantt chart becomes wider, it is cut to the maximal width.<br />
         The maximal Gantt width can be increased by &lt;C> <b>MaxWidth</b> attribute, but it will be shrunk in IE browser to its hard limits. 1 193 049 is limit for IE8 strict, 1 342 177 for IE8 quirks and 1 533 918 for other IE versions.<br />
      </li>
      <li>
         See documentation for <a href="../../Doc/GanttZoom.htm#Paging">Horizontal paging by scroll</a> for more options.<br />
      </li>
     </ul>
     </li>
          <li> <h4>Vertical paging of rows</h4><br />
      Grid with Gantt chart can have rows paged vertically like normal grid. Can be also freely combined with horizontal Gantt paging.
      <ul>
         <li><b>Render root rows on scroll</b>, see documentation for <a href="../../Doc/Paging.htm">Paging root rows</a> or tutorial <a href="../Paging/01-Client_root_paging.html">01-Client_root_paging</a>.</li>
         <li><b>Render children on expand</b>, see documentation for <a href="../../Doc/TreePaging.htm#ChildPaging">ChildPaging</a> or tutorial <a href="../Paging/02-Client_child_paging.html">02-Client_child_paging</a>.</li>
         <li><b>Render children on scroll</b>, see documentation for <a href="../../Doc/TreePaging.htm#ChildParts">ChildParts</a> or tutorial <a href="../Paging/02-Client_child_paging.html">02-Client_child_paging</a>.</li>
         <li><b>Load root rows on scroll</b>, see documentation for <a href="../../Doc/PagingServer.htm">Server paging root rows</a> or tutorial <a href="../Paging/06-Server_root_paging.html">06-Server_root_paging</a>.</li>
         <li><b>Load children on scroll</b>, see documentation for <a href="../../Doc/PagingServer.htm#ChildPaging">Server ChildPaging</a> or tutorial <a href="../Paging/07-Server_child_paging.html">07-Server_child_paging</a>.</li>
         <li><b>Gantt chart restrictions in server paging</b> (loading rows on demand)<br /> 
            <ul>
               <li>Dependencies cannot be linked between tasks in different pages or child pages.</li>
               <li>Resource charts cannot be calculated from not yet loaded tasks.</li>
               <li>Chart size cannot be calculated from not yet loaded tasks (GanttSize should not be "" or "0").</li>
               <li>GanttBase and GanttFinish cannot be automatically calculated from not yet loaded tasks.</li>
               <li>All Formula summary Gantt functions, e.g. ganttstart(), cannot be calculated from not yet loaded tasks.</li>
            </ul>
         </li>
      </ul>
     </li>    
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialGantt\s*=\s*(\d+)/), TGIndex = 128;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridDisplay3", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGantt="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>